<template>
  <view class="page">
    <UserDate/>
    
    <u-tabs class="pos" :list="tabs" :current="act" :is-scroll="false" :active-color="themeColor" @change="change"/>
    
    <template v-if="act == 3">
      <view class="tcard">
        <view class="title">
          手术进度
        </view>
        <view class="content flexR">
          <view class="nodes-box">
            <view class="nodes flexC">
              <view class="node done">
                2024-09-10 10:02:35
              </view>
              <view class="node active">
                2024-09-10 10:02:35
              </view>
              <view class="node" v-for="i in 12" :key="i">
                2024-09-10 10:02:35
              </view>
            </view>
          </view>
          
          <view class="right">
            <view class="block" v-for="i in 14">
              手术开始
            </view>
          </view>
        </view>
        
      </view>
    </template>
    
    
    <view v-else class="tcard">
      <view class="title flexR">
        门诊排队挂号候诊
        <view class="tig_status success">
          候诊中
        </view>
      </view>
      
      <view class="queue">
        <view class="numtitle">
          当前叫号
        </view>
        <view class="num">
          18
        </view>
        
        <view class="flexR queueDetail">
          <view class="">
            <view class="">
              我的就诊号
            </view>
            <view class="">
              32
            </view>
          </view>
          <view class="">
            <view class="">
              前面等待人数
            </view>
            <view class="">
              14
            </view>
          </view>
        </view>
        
        <view class="line"></view>
        
        <view class="form">
          <view class="item">
            <view class="label">预约科室：</view>
            <view class="value">骨科门诊</view>
          </view>
          <view class="item">
            <view class="label ">就诊位置：</view>
            <view class="value red">
              <view class="pst flexC" @click="$router.push('/pages/navInHsp/navInHsp')">
                <img :src="`${$store.state.baseApi}/icon/way.png`" alt="">
                路线
              </view>
              门诊三楼B区外科诊区
            </view>
          </view>
          <view class="item">
            <view class="label">候诊诊室：</view>
            <view class="value">121诊室</view>
          </view>
          <view class="item">
            <view class="label">预约医生：</view>
            <view class="value">肖友明（副主任医师）</view>
          </view>
        </view>
        
        <view class="line"></view>
        
        <view class="">
          <view class="btn" @click="toSignin">
            刷新排队进度
          </view>
        </view>
      </view>
    </view>
    
    <Tip :show.sync='showTip' title='自助机签到规则'>
      尊敬的病员朋友: <br>
      1.患者挂号后，前往诊区签到机处刷就诊卡或扫电子就诊卡的二维码完成签到。如果所有号源都按时签到，按照挂号序号从小到大进行叫号就诊;如果有迟到者或过号者，签到后，在当前就诊人后需等待三位才能进行就诊，所以您的等待人数是动态变化的请您耐心等待。<br>
      2.回诊:患者完善相关检查、检验后回诊，需在签到机上再次签到，叫号系统按照初诊一位回诊一位的规则进行排序。<br>
      3.过号、回诊患者均需再次签到。<br>
      4.签到时间:<br>
      上午08:00-11:20，下午13:00-16:00<br>
      重点说明：签到并非先签先就诊，大家都准时签到的情况下，按照挂号序号从小到大进行叫号就诊，有迟到病人未完成签到时，您才有可能提前就诊，请您耐心等待。
    </Tip>
  </view>
</template>

<script>
  import UserDate from '@/components/UserInfo/user-date.vue'
  import { themeColor } from '@/static/js/theme.js'
  
  export default {
    components: {UserDate},
    data() {
      return {
        themeColor,
        showTip: true,
        tabs:[
          {name: '挂号'},
          {name: '检查'},
          {name: '取药'},
          {name: '手术进度'}
        ],
        act: 0
      }
    },
    methods: {
      change(index) {
      	this.act = index;
      },
    }
  }
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont2"; /* Project id 2225171 */
  src: url('//at.alicdn.com/t/font_2225171_1f3wele8dcr.woff2?t=1638459077304') format('woff2'),
       url('//at.alicdn.com/t/font_2225171_1f3wele8dcr.woff?t=1638459077304') format('woff'),
       url('//at.alicdn.com/t/font_2225171_1f3wele8dcr.ttf?t=1638459077304') format('truetype');
}
.pos {
  width: 100vw;
  position: sticky;
  top: 0;
  left: -32upx;
  transform: translateY(-32upx);
  margin-left: -32upx;
  margin-right: -32upx;
  z-index: 9;
}
.title {
  justify-content: space-between;
}
.queue {
  margin-top: 18upx;
  border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: 24upx;
}
.numtitle {
  width: 200upx;
  height: 66upx;
  background: #E2EDFF;
  border-radius: 50upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28upx;
  color: rgba(0,0,0,0.7);
  line-height: 66upx;
  margin: 8upx auto 24upx;
  text-align: center;
}
.num {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 48upx;
  color: #3E81F7;
  line-height: 44upx;
  text-align: center;
  margin-bottom: 30upx;
}
.queueDetail {
  justify-content: space-around;
  margin-top: 24upx;
  view {
    text-align: center;
    margin-bottom: 14upx;
  }
}
.pst {
  height: 0;
  margin-top: -10upx;
  margin-left: 10px;
  align-items: center;
  float: right;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #3E81F7;
  line-height: 44upx;
  margin-right: -8upx;
  >img {
    width: 32upx;
    height: 32upx;
  }
}
.form {
  padding-top: 16upx;
}
.item {
  display: flex;
  margin-bottom: 16upx;
  .label {
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.5);
    line-height: 44upx;
  }
  .value {
    flex: 1;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
    line-height: 44upx;
    position: relative;
    .pst {
      align-items: center;
      float: right;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24upx;
      color: $theme-color;
      line-height: 44upx;
      // transform: translateX(8upx);
      margin-left: -8upx;
      margin-right: -8upx;
      margin-bottom: -16upx;
      >img {
        width: 32upx;
        height: 32upx;
      }
    }
  }
}
.btn {
  margin-left: auto;
  width: 200upx;
  height: 54upx;
  margin-top: 24upx;
  background: $theme-color;
  border-radius: 28upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #FFFFFF;
  line-height: 54upx;
  text-align: center;
}

.content {
  min-height: calc(100vh - 136upx);
  background-color: #FFF;
  // padding: 24upx 32upx;
  overflow-y: auto;
  gap: 24upx;
  .process {
    flex-shrink: 0;
    width: 180upx;
    height: calc(100vh - 200upx);
    overflow-y: auto;
  }
}
.nodes-box {
  flex-shrink: 0;
  width: 180upx;
}
.nodes {
  position: relative;
  gap: 24upx;
  justify-content: space-around;
  &:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 1em;
    width: 2px;
    height: calc(100% - 1em - 2px);
    background-color: #D5E4FF;
  }
}
.node {
  position: relative;
  height: 72upx;
  width: 160upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28upx;
  color: rgba(0,0,0,0.4);
  line-height: 32upx;
  &:before {
    content: '';
    display: block;
    width: 20upx;
    height: 20upx;
    position: absolute;
    right: -18upx;
    top: 50%;
    transform: translate(50%, -50%);
    background-color: #D5E4FF;
    border-radius: 20upx;
  }
  &.done {
    // color: #9CC0FF;
    color: rgba(0,0,0,0.8);
    &:before {
      font-family: "iconfont2" !important;
      content: "\e807";
      color: #FFF;
      text-align: center;
      line-height: 34upx;
      display: block;
      width: 32upx;
      height: 32upx;
      position: absolute;
      // right: calc(-100% + 0.5px);
      // top: 50%;
      // transform: translate(50%, -50%);
      background-color: #D5E4FF;
      border-radius: 20upx;
    }
  }
  &.active {
    // font-weight: 600;
    // color: $theme-color;
    &:before {
      content: '';
      display: block;
      width: 16upx;
      height: 16upx;
      // position: absolute;
      // right: calc(-100% + 0.5px) ;
      // top: 50%;
      // transform: translate(50%, -50%);
      background-color: $theme-color;
      border-radius: 20upx;
      z-index: 2;
    }
    &:after {
      content: '';
      display: block;
      width: 32upx;
      height: 32upx;
      position: absolute;
      right: -18upx;
      top: 50%;
      transform: translate(50%, -50%);
      background-color: #D5E4FF;
      border-radius: 20upx;
    }
  }
}
.right {
  flex: 1;
}
.block {
  padding: 0 20upx;
  background-color: #ECF3FF;
  height: 72upx;
  line-height: 72upx;
  margin-bottom: 24upx;
  border-radius: 8upx;
}
</style>
